<template>
	<view class="container">
		<!-- 顶部标题区 -->
	<!-- 	<view class="header">
			<view class="title-section">
				<text class="title">游戏排行榜</text>
				<text class="update-tag">实时更新</text>
			</view>
			<text class="subtitle">根据游戏热度实时排名</text>
		</view> -->
		<!-- 前三名展示区 -->
		<view class="podium" :style="{ 
			backgroundImage: gameList[0]?.game_banner ? `url(${gameList[0].game_banner})` : 'none',
			backgroundSize: 'cover',
			backgroundPosition: 'center'
		}">
			<!-- 添加一个遮罩层使内容更清晰 -->
			<view class="podium-overlay"></view>
			
			<!-- 第二名 -->
			<view class="podium-item second" @click="navigateToGameDetail(gameList[1].game_id)">
				<view class="rank-badge silver">2</view>
				<image :src="gameList[1].game_logo" class="podium-avatar" mode="aspectFill"/>
				<view class="podium-info">
					<text class="podium-name">{{ gameList[1].game_name }}</text>
					<view class="podium-score">
						<text class="score-value">8888</text>
						<text class="score-unit">热度</text>
					</view>
				</view>
			</view>
			
			<!-- 第一名 -->
			<view class="podium-item champion" @click="navigateToGameDetail(gameList[0].game_id)">
				<view class="rank-badge gold">
					<text class="crown">👑</text>
				</view>
				<image :src="gameList[0].game_logo" class="podium-avatar" mode="aspectFill"/>
				<view class="podium-info">
					<text class="podium-name">{{ gameList[0].game_name }}</text>
					<view class="podium-score champion-score">
						<text class="score-value">9999</text>
						<text class="score-unit">热度</text>
					</view>
				</view>
				<view class="champion-glow"></view>
			</view>
			
			<!-- 第三名 -->
			<view class="podium-item third" @click="navigateToGameDetail(gameList[2].game_id)">
				<view class="rank-badge bronze">3</view>
				<image :src="gameList[2].game_logo" class="podium-avatar" mode="aspectFill"/>
				<view class="podium-info">
					<text class="podium-name">{{ gameList[2].game_name }}</text>
					<view class="podium-score">
						<text class="score-value">7777</text>
						<text class="score-unit">热度</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他排名列表 -->
		<view class="rank-list">
			<view class="rank-item" v-for="(game, index) in gameList.slice(3)" :key="game.game_id" 
				  @click="navigateToGameDetail(game.game_id)">
				<view class="rank-left">
					<text class="rank-number">{{ index + 4 }}</text>
					<image :src="game.game_logo" class="rank-avatar" mode="aspectFill"/>
					<view class="rank-info">
						<text class="rank-name">{{ game.game_name }}</text>
						<text class="rank-desc">{{ truncateText(game.game_description, 15) }}</text>
					</view>
				</view>
				<view class="rank-right">
					<text class="rank-score">{{ Math.floor(Math.random() * 1000) }}</text>
					<text class="rank-unit">热度</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { games } from '../../utils/gameData.js';
export default {
	data() {
		return {
			gameList: []
		}
	},
	created() {
		// 根据 game_id 排序
		this.gameList = [...games].sort((a, b) => {
			// 将 game_id 转换为数字进行比较
			return parseInt(a.game_id) - parseInt(b.game_id);
		});
	},
	methods: {
		navigateToGameDetail(gameId) {
			uni.navigateTo({
				url: `/pages/lobby/gameDetail?id=${gameId}`
			});
		},
		truncateText(text, length = 20) {
			if (text && text.length > length) {
				return text.substring(0, length) + '...';
			}
			return text;
		}
	}
}
</script>

<style scoped>
.container {
	background: #1E1E2E;
	min-height: 100vh;
}

.header {
	margin-bottom: 30px;
	padding: 0 10px;
}

.title-section {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.title {
	font-size: 28px;
	font-weight: bold;
	color: #9796B8;
}

.update-tag {
	background: #4D4C6D;
	color: #9796B8;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 12px;
}

.subtitle {
	font-size: 14px;
	color: #6E6C89;
}

.podium {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 15px;
	margin-bottom: 30px;
	padding: 40px 15px 20px;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.podium-item {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 15px;
	border-radius: 20px;
	background: #2D2D44;
	border: 1px solid #4D4C6D;
	transition: transform 0.15s ease;
}

.podium-item:active {
	transform: scale(0.98);
}

.champion {
	padding-top: 30px;
	margin-bottom: 20px;
	background: linear-gradient(180deg, #2D2D44 0%, #4D4C6D 100%);
	border: 1px solid #6E6C89;
}

.champion-glow {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	box-shadow: 0 0 20px rgba(151, 150, 184, 0.2);
	pointer-events: none;
}

.rank-badge {
	position: absolute;
	top: -15px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 16px;
	border: 2px solid #2D2D44;
}

.gold {
	background: linear-gradient(135deg, #FFD700, #FFA500);
	color: #2D2D44;
}

.silver {
	background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
	color: #2D2D44;
}

.bronze {
	background: linear-gradient(135deg, #CD7F32, #8B4513);
	color: #2D2D44;
}

.crown {
	font-size: 20px;
}

.podium-avatar {
	width: 70px;
	height: 70px;
	border-radius: 20px;
	margin-bottom: 12px;
	border: 2px solid #4D4C6D;
}

.champion .podium-avatar {
	width: 85px;
	height: 85px;
	border: 3px solid #9796B8;
}

.podium-info {
	text-align: center;
	width: 100%;
}

.podium-name {
	color: #9796B8;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
}

.podium-score {
	background: #4D4C6D;
	padding: 4px 12px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.champion-score {
	background: linear-gradient(90deg, #6E6C89, #9796B8);
}

.score-value {
	color: #9796B8;
	font-size: 14px;
	font-weight: bold;
}

.score-unit {
	color: #6E6C89;
	font-size: 12px;
}

.rank-list {
	background: #2D2D44;
	border-radius: 20px;
	padding: 15px;
}

.rank-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	border-bottom: 1px solid rgba(110, 108, 137, 0.2);
	transition: transform 0.15s ease;
}

.rank-item:active {
	transform: scale(0.98);
	background: rgba(77, 76, 109, 0.3);
}

.rank-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.rank-number {
	font-size: 16px;
	font-weight: bold;
	color: #6E6C89;
	min-width: 24px;
	text-align: center;
}

.rank-avatar {
	width: 45px;
	height: 45px;
	border-radius: 12px;
	border: 1px solid #4D4C6D;
}

.rank-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rank-name {
	color: #9796B8;
	font-size: 15px;
	font-weight: 500;
}

.rank-desc {
	color: #6E6C89;
	font-size: 12px;
}

.rank-right {
	background: rgba(77, 76, 109, 0.3);
	padding: 8px 12px;
	border-radius: 12px;
	text-align: center;
}

.rank-score {
	color: #9796B8;
	font-size: 15px;
	font-weight: bold;
	display: block;
}

.rank-unit {
	color: #6E6C89;
	font-size: 11px;
}

.podium-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(30, 30, 46, 0.25); /* 深色遮罩，可以调整透明度 */
	pointer-events: none; /* 确保遮罩层不会影响点击事件 */
}
</style> 